:root {
  --primary-color: #409eff;
  --el-color-primary: var(--primary-color) !important;
  --el-color-primary-hover: #d7d7d7;
  --info-color: #9fbff2;
  --text-color: #ddefff;
  --bg-color-gary: #F2F3F5;
  --pleaceholder-color: #97aac8;
  --menu-width-open: 220px;
  --menu-width-close: 54px;
  --menu-header-height: 50px;
  --menu-item-font-size: 14px;
  --boxshadow: 0px 5px 20px 0px rgba(1, 68, 127, 0.1);
}

.el-transfer {
  --el-transfer-panel-width: 560px !important;
}

//.el-button {
//  --el-button-border-color: none !important;
//  --el-button-bg-color: var(--el-color-primary);
//  --el-button-text-color: #fff;
//  --el-button-hover-border-color: var(--el-color-primary) !important;
//  --el-button-hover-bg-color: var(--el-color-primary) !important;
//  --el-button-hover-text-color: #fff;
//  --el-button-active-border-color: none !important;
//  --el-button-active-bg-color: var(--el-color-primary) !important;
//  --el-button-active-text-color: #fff;
//  --el-button-disabled-border-color: var(--el-color-primary) !important;
//  --el-button-disabled-bg-color: var(--el-color-primary) !important;
//  height: 42px;
//  padding: 0 20px;
//  border-radius: 2px;
//
//  &--small {
//    height: 32px !important;
//  }
//
//  &.is-text {
//    color: var(--primary-color);
//  }
//}

@mixin setButtonColor($c) {
  --el-button-bg-color: #{$c} !important;
  --el-button-hover-border-color: #{$c} !important;
  --el-button-hover-bg-color: #{$c} !important;
  --el-button-active-bg-color: #{$c} !important;
  --el-button-disabled-border-color: #{$c} !important;
  --el-button-disabled-bg-color: #{$c} !important;
}

.i-btn-origin {
  @include setButtonColor(#ecaa0b);

  &.is-text {
    color: #ecaa0b;
  }
}

.i-btn-default {
  border:none;
  color:#606266;
  @include setButtonColor(#F2F3F5);

  &.is-text {
    color: #606266;
  }
}

.el-message-box__btns {
  .el-button:first-child {
    color: #777;
    border: none;
    @include setButtonColor(#fff);
  }
}


.el-select__tags{
  .el-tag {
    background-color: #fff !important;
  }
}


// 输入框公共样式
//%input-common {
//  width: 100%;
//  border: none;
//  font-size: 15px;
//  border-radius: 0;
//  font-weight: 400;
//  font-family: Source Han Sans CN;
//  color: var(--el-text-color-regular);
//  background: var(--bg-color-gary) !important;
//}
//
//.el-input__inner::placeholder {
//  color: var(--pleaceholder-color);
//}
//
//.el-date-editor.el-input,
//.el-input__wrapper,
//.el-input__wrapper.is-focus,
//.el-input__inner,
//.el-input {
//  height: 38px;
//  @extend %input-common;
//}

//.el-textarea__inner {
//  height: 125px;
//  @extend %input-common;
//}

//.el-input .el-input__count .el-input__count-inner {
//  background: 0 0;
//}

@mixin setInputHeight($px) {
  :deep(.el-input__wrapper),
  //:deep(.el-input__inner),
  :deep(.el-input__wrapper.is-focus),
  :deep(.el-input__inner::placeholder),
  :deep(.el-input) {
    height: $px !important;
  }

  .el-input__wrapper,
  .el-input__wrapper.is-focus,
  .el-input__inner,
  .el-input__inner::placeholder,
  .el-input {
    height: $px !important;
  }
}

@mixin setInputWidth($px) {
  :deep(.el-input) {
    width: $px !important;
  }

  .el-input {
    width: $px !important;
  }
}

// 侧边栏目录公共样式
.component-el-menu {
  height: 100vh;
  overflow-y: auto;

  // 取消滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  --el-menu-active-color: var(--text-color) !important;
  background: #ffffff;
  --el-menu-bg-color: none !important;
  --el-menu-text-color: var(--text-color) !important;
  --el-menu-hover-text-color: var(--primary-color) !important;
  --el-menu-hover-bg-color: none !important;
  --el-menu-item-font-size: var(--menu-item-font-size) !important;
  .el-sub-menu {
    .el-menu{
      --el-menu-bg-color: none !important;
      --el-menu-hover-bg-color: none!important;
    }
  }

  .el-menu-item,.el-sub-menu  > .el-sub-menu__title{
    height:60px;
    &:hover{
      position: relative;
      span{
        z-index: 10;
      }
      &::before{
        content: '';
        display: block;
        position: absolute;
        width: 90%;
        height: 100%;
        left: 5%;
        background-color: #d7d7d7 !important;
      }
    }
  }

  .el-sub-menu__title {
    color: var(--text-color) !important;
  }

  .cem-title {
    width: var(--menu-width-open) !important;
    display: flex;
    align-items: center;
    position: relative;
    max-height: 0px;
    padding: 35px 20px 20px ;
    font-size: 18px;
    font-weight: 500 !important;
    color: #333333;
    justify-content: center;
    margin-bottom: 15px;
    .el-icon{
      font-size: 22px;
      margin-right: 10px;


      img{
        height: 30px;
        width: 30px;
      }
    }
  }

  .cem-logo {
    max-height: 0px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 35px 20px 20px ;
    margin: 0 auto 15px;

    .el-icon {
      color: var(--text-color);
      font-size: 22px;

      img{
        height: 30px;
        width: 30px;
      }
    }


  }

  .el-menu {
    --el-menu-active-color: var(--text-color) !important;
    --el-menu-bg-color: var(--el-color-primary-hover) !important;
    --el-menu-hover-bg-color: var(--el-color-primary) !important;
    --el-menu-text-color: var(--text-color) !important;
    --el-menu-hover-text-color: var(--primary-color) !important;
    --el-menu-item-font-size: var(--menu-item-font-size) !important;
  }

  .el-menu-item.is-active,.el-sub-menu.is-active > .el-sub-menu__title{
    height: 40px;
    position: relative;
    span{
      z-index: 10;
    }
    &::before{
      content: '';
      display: block;
      position: absolute;
      width: 90%;
      height: 100%;
      left: 5%;
      border-radius: 3px;
    }
  }
}

.el-popper{
  .el-menu{
    background-color: #000c17;
    --el-menu-active-color: var(--text-color) !important;
    --el-menu-hover-bg-color: var(--el-color-primary) !important;
    --el-menu-text-color: var(--text-color) !important;
    --el-menu-hover-text-color: var(--primary-color) !important;
    --el-menu-item-font-size: var(--menu-item-font-size) !important;
  }

  .el-menu-item{
    height: 40px;
    margin-bottom: 10px;
  }

  .el-menu-item.is-active {
    position: relative;
    span{
      z-index: 10;
    }
    &::before{
      content: '';
      display: block;
      position: absolute;
      width: 90%;
      height: 100%;
      left: 5%;
      border-radius: 3px;
      background-color: var(--el-color-primary) !important;
    }
  }
}


.cem-open {
  width: var(--menu-width-open) !important;
}

.cem-close {
  width: var(--menu-width-close) !important;
}

// 顶部目录公共样式
.comp-head {
  $head-wraps: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--menu-header-height);
  box-shadow: var(--boxshadow);

  &-left {
    margin-left: $head-wraps;
    width: 60px;
    .el-icon{
      cursor: pointer;
      font-size: 22px;

      &:hover{
        color: var(--primary-color);
      }
    }
  }

  &-tagviews {
    flex: 1;
    flex-wrap: nowrap;

    .tag-item {
      padding: 0 20px;
      margin-top: -4px;
      display: inline-block;
      height: 35px;
      display: flex;
      align-items: center;
      color: #97aac8;
      font-size: 15px;
      font-weight: bold;
      border-radius: 2px;
      position: relative;
      cursor: pointer;

      .el-icon {
        position: absolute;
        right: 0;
        top: 11px;
      }

      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 20px;
        height: 3px;
        border-radius: 10px;
        margin-left: -2.5%;
        width: calc(105% - 40px);
        background-color: #97aac8;
      }
    }

    .tag-open {
      color: var(--primary-color);

      &::after {
        background-color: var(--primary-color);
      }
    }
  }

  &-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 300px;
    margin-right: $head-wraps;

    .item{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgb(233, 227, 227);
      .el-icon{
        font-size: 17px;
      }
    }

    .userhead-0{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #fff;
      background-color: #529af3;
    }

    .userhead-1{
      width: 35px;
      height: 35px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #fff;
      background-color: #F56C6C;
    }

    .username {
      color: rgb(99, 96, 96);
      margin-left: 10px;
      font-weight: bold;
    }

    .back {
      color: var(--primary-color);
      font-weight: bold;
    }
  }
}

// 公共上传组件
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-upload-list__item-actions .el-icon {
  color: #fff;
  border-radius: 6px;
  font-size: 18px;
}

.upload-components {
  width: 100% !important;

  .el-upload {
    width: 100%;
  }
}

.upload-button-img {
  width: 150px;
  height: 150px;
  border-radius: 6px;
  background: #fafafa;
  border: 1px solid var(--el-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  &:hover {
    border-color: var(--el-color-primary);
  }
}

.upload-button-files {
  width: 100%;
  height: 40px;
  border-radius: 2px;
  background: #fafafa;
  border: 1px solid var(--el-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 10px;
  margin-top: 10px;

  .el-icon{
    margin-right: 10px;
  }

  &:hover {
    border-color: var(--el-color-primary);
  }
}

.upload-actions-file {
  width: 100%;

  .upload-list__item {
    margin-bottom: 10px;
    width: 100%;
    height: 40px;
    border-radius: 2px;
    border: 1px solid var(--el-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:last-child {
      margin-bottom: 0;
    }

    .left {
      display: flex;
      align-items: center;
      margin-left: 20px;

      a {
        text-decoration: none;
        color: var(--primary-color);
      }

      .el-icon {
        margin-right: 10px;
      }
    }

    .right {
      margin-right: 20px;
    }
  }
}

.upload-actions {
  position: absolute;
  top: 0;
  cursor: auto;
  z-index: 9999;
  left: 0;
  width: 150px;
  height: 150px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  font-size: 18px;
  align-items: center;
  justify-content: space-around;
  display: none;

  .upload-list__item {
    cursor: pointer;
  }

  &::before,
  &::after {
    content: '';
    display: block;
  }
}

.upload-preview {
  width: 150px;
  height: 150px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
}

.el-upload:hover {
  .upload-actions {
    display: flex !important;
  }
}

.i-weditor {
  width: 100%;
  border: 1px solid #ccc;

  &:hover {
    border: 1px solid var(--el-color-primary);
  }
}

// 公共弹窗样式
//.el-dialog {
//  --el-dialog-margin-top: 4vh;
//}
//
//.el-dialog__header {
//  margin-right: 0 !important;
//  background: #000C17;
//
//  .el-dialog__headerbtn .el-dialog__close {
//    color: #fff;
//  }
//
//  .el-dialog__title {
//    font-size: 16px;
//    color: #fff !important;
//  }
//}
//
//.el-dialog__body {
//  max-height: 75vh;
//  overflow-y: auto;
//  overflow-x: hidden;
//}
//
//.dialog-footer {
//  position: absolute;
//  z-index: 99;
//  width: calc(100% - 40px);
//  height: 10px;
//  background: #fff;
//  left: 0;
//  bottom: -50px;
//  padding: 0;
//  margin: 0;
//  padding: 20px;
//  border-top: 1px solid #e4e4e4;
//  box-shadow: 0 8px 24px -2px rgb(0 0 0 / 5%);
//  display: flex;
//  align-items: center;
//  justify-content: flex-end;
//}

// 编译器样式
.w-e-full-screen-container {
  z-index: 9999;
}

// form
.popup-form {
  height: 100%;
  width: 100vw;
  background: #fafafa;
}

.popup-section {
  margin: 0 auto;
  // min-height: calc(100% - 70px - 20px);
  width: 93%;
  background: #fff;
  border-radius: 10px;
}

// title组件固定header
.title-component-lock {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  width: 100%;
  z-index: 999;
}

// From 公共组件
.comp-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  @include setInputHeight(40px);

  .el-form-item {
    display: flex;
    align-items: center;

    &::after{
      content: "";
      display: block;
      width: 15px;
    }
  }
}


.el-breadcrumb__inner{
  color:#86909C !important;
}

#nprogress .bar {
  background:var(--el-color-primary) !important; // 自定义颜色
  height: 2px !important;        // ⾼度
}

.el-drawer{
  .el-drawer__header{
    padding-bottom: 20px !important;
    background-color: #F2F3F5;
    margin-bottom: 0px;
    // color:#fff;
  }

  .el-drawer__body{
    padding:0;
  }

  .el-drawer__footer{
    padding: 0;
  }
}

.user-tab{
  margin-top: 10px;
  width: 100%;
  flex-direction: column;
  display: flex;
  justify-content: center;
  position:relative;

  h2{
    display: flex;
    align-items: center;
    margin-left: 2.5%;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-color);

    .el-icon{
      margin-right: 8px;
    }
  }

  .item-tab{
    width: 95%;
    margin-left: 2.5%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #f3f1f1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 15px;
    margin-bottom: 15px;

    &:hover{
      border-color: var(--el-color-primary);
    }

    .title{
      color:#000C17;
      margin-left: 15px;
      width: 80px;
      font-weight: bold;
      text-align: justify;
      text-justify: inter-ideograph;
      display: flex;
      align-items: center;
    }

    .value{
      color:#5d5e5f;
    }
  }

}

.user-footer{
  height: 120px;
  width: 100%;
  // background: #EFEFEF;
  border-top: 1px solid rgb(206, 203, 203);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;

  .el-button{
    width: 95%;
    height: 40px;
    border-radius:5px ;
    margin-bottom: 10px;

      &:nth-child(2){
        margin: 0;
      }
  }

}

.el-message-box{
 .el-button{
  width: 70px;
  height: 35px;
 }
}


